<template>
  <p>name: {{ name }}</p>
  <p>age: {{ age }}</p>

  <button @click="updateName">update name</button>
</template>

<script>
import { reactive } from 'vue';

export default {
  setup() {
    const data = reactive({
      name: 'ifer',
      age: 10,
      address: '河南',
      sex: '男',
    })
    // !问题 1：模板中多次用到了 data.，麻烦
    // !问题 2：明明模板中只用了 data 中的两个属性，你却把整个 data 都导出了，性能浪费

    /* const updateName = () => {
      data.name = '谈啸'
    }
    return { name: data.name, age: data.age, updateName } */

    /* let name = data.name
    let age = data.age
    const updateName = () => {
      name = '谈啸'
    }
    return { name, age, updateName } */

    // !从响应式 reactive 对象中，解构出来的简单数据类型，会丢失响应式
    let { name, age } = data
    const updateName = () => {
      name = '谈啸'
    }
    return { name, age, updateName } 
  }
}
</script>